<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #canvas,#video {
        float: left;
        margin-right: 10px;
        background: #fff;
      }
      .box {
        overflow: hidden;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <video id="video" width="400" height="300"></video>
      <canvas id="canvas"></canvas>
    </div>
    <button id="live">直播</button>
    <button id="snap">截图</button>
    <script>
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var width = video.width;
      var height = video.height;
      canvas.width = width;
      canvas.height = height;
      function liveVideo(){
        var URL = window.URL || window.webkitURL;   // 获取到window.URL对象
        navigator.getUserMedia({
          video: true
        }, function(stream){
          video.src = URL.createObjectURL(stream);   // 将获取到的视频流对象转换为地址
          video.play();   // 播放
          //点击截图
          document.getElementById("snap").addEventListener('click', function() {
            ctx.drawImage(video, 0, 0, width, height);
            var url = canvas.toDataURL('image/png');
            document.getElementById('download').href = url;
          });
        }, function(error){
          console.log(error.name || error);
        });
      }
      document.getElementById("live").addEventListener('click',function(){
        liveVideo();
      });
    </script>
  </body>
</html>
